<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>产品详情</title>
		<link rel="stylesheet" href="../css/main.css" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<script src="../../libs/js/vue.min.js"></script>
		<script src="../../libs/js/vant.min.js"></script>
		<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			.lazyload {
				padding: 10px;
			}
			
			.lazyload img {
				width: 100%;
				margin: 10px 0px;
			}
			
			#suibian {
				background-color: #E0E2E4;
			}
			
			#suibian a {
				color: red;
				font-weight: 600;
				margin-left: 30px;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<div>
				<van-icon name="arrow-left" />
				<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
			</div>
			<div id="middle">
				<van-swipe :autoplay="3000" indicator-color="white">
					<van-swipe-item><img style="height: 100%; width: 378px;" src="../../img/d_2.jpg" /></van-swipe-item>
					<van-swipe-item><img style="height: 100%; width: 100%;" src="../../img/d_3.jpg" /></van-swipe-item>
				</van-swipe>
			</div>
			<br />
			<p style="font-weight:700; font-size: 14px; text-align: center;">意大利高级上档次红酒（头孢加酒，说走就走）</p>
			<br />
			<h2 style="color: red;">￥ 999</h2>
			<br />
			<p style="font-size: 12px; margin-left: 30px;">快递 ：免运费 <span style="margin-left: 50px;">销量290</span></p>
			<br />
			<div id="suibian">
				<p>
					<a href="#">☞正品保证</a>
					<a href="#">☞急速退款</a>
					<a href="#">☞两天内发货</a>
				</p>
			</div>
			<br />
			<h2 style="font-size: 16px;">商品详情</h2>
			<div class="lazyload">
				<img v-for="img in imageList" v-lazy="img">
				<footer>
					<van-goods-action>
						<van-goods-action-mini-btn icon="chat-o" text="客服" @click="onClickMiniBtn"></van-goods-action-mini-btn>
						<van-goods-action-mini-btn icon="cart-o" text="购物车" @click="onClickMiniBtn"></van-goods-action-mini-btn>
						<van-goods-action-big-btn text="加入购物车" @click="onClickBigBtn"></van-goods-action-big-btn>
						<van-goods-action-big-btn primary text="立即购买" @click="onClickBigBtn"></van-goods-action-big-btn>
					</van-goods-action>
				</footer>
			</div>
			<script>
				Vue.use(VueLazyload);
				var vm = new Vue({
					el: "#app",
					data: {
						imageList: [
							'../../img/dt_2.png',
							'../../img/dt_3.png',
							'../../img/dt_4.png'
						]
					},
					methods: {
						onClickMiniBtn() {
							Toast('点击图标');
						},
						onClickBigBtn() {
							Toast('点击按钮');
						}
					}
				});
			</script>
	</body>

</html>